<!--
***图文所有评论***
-->
<template>
  <div>
    <v-header v-if="!$root.ISAPP">
      <div class="nav-tab2">
        <h3>全部评论</h3>
      </div>
    </v-header>

    <div class="comment" v-if="commentData">
      <v-list :load-handle='dataLoad' :more-handle='loadmore' :more-handling='css.isLoading' :isend='css.isEnd'>
        <div class="comment-item" v-for="(item,index) in commentData" :key="index">
          <div class="comment-info">
            <img :src="item.userphoto | https" class="comment-headImg">
            <span class="comment-name">{{item.username}}</span>
            <span class="comment-like" :class="{ 'like': item.islike }" @click="commentLike(item)">{{item.likecount}}</span>
          </div>
          <div class="comment-body">
            <p class="comment-text">{{item.comment}}</p>
            <p class="comment-time">{{item.replytime}}</p>
            <div class="comment-reply" v-if="item.commentreply.length > 0">
              <template v-for="reply in item.commentreply">
                <div class="comment-info">
                  <img :src="reply.userphoto | https" class="comment-reply-headImg">
                  <span class="comment-reply-name" >{{reply.name}}</span>
                </div>
                <div class="comment-reply-text">{{reply.commentreply}}</div>
                <p class="comment-reply-time">{{reply.replytime}}</p>
              </template>
            </div>
          </div>
        </div>
      </v-list>
    </div>

    <div class="writeReview" v-show="showWriteReview" @click="switchReview">
      <div class="reviewContent" @click.stop>
        <textarea type="text" v-model.trim="reviewText" placeholder="热门评论将会被优先展示哦" class="reviewInput" maxlength="72">
        </textarea>
        <input type="checkbox" v-model="anonymous" id="anonymous">
        <label for="anonymous" class="anonymous">匿名</label>
        <span class="submitReview" :class="{black: reviewText}" @click="save">评论</span>
      </div>
    </div>

    <div class="write" @click="switchReview">唠叨两句...</div>
  </div>
</template>

<script>
import { comment, saveComment, commentLike } from '../../common/api/distribution'
import { DateDiffFormat } from '@/common/util'
export default {
  data() {
    return {
      commentData: [],
      reviewText: '',
      showWriteReview: false,
      anonymous: false,
      pagination: {
        sumcount: 0,
        pagesize: 10,
        pageindex: 1,
        hasLoad: true
      },
      css: {
        isLoading: false,
        isEnd: false,
        hasData: true
      }
    }
  },
  created() {
    this.getComments()
    window.document.title = '全部评论'
  },
  methods: {
    switchReview() {
      if (!JSON.parse(window.localStorage.getItem('currentUser') || '{}').token) {
        this.$router.push(`/login`)
      } else {
        this.showWriteReview = !this.showWriteReview
      }
    },
    dataLoad() {
      this.commentData = []
      this.pagination.pageindex = 1
      this.css.isEnd = false
      this.getComments()
    },
    loadmore() {
      if (this.css.isEnd === true) {
        this.toast('已无更多')
      } else {
        this.pagination.pageindex += 1
        if (this.pagination.pageindex > 1) {
          this.pagination.hasLoad = false
        }
        this.getComments()
      }
    },
    getComments() {
      let opt = {
        size: this.pagination.pagesize,
        page: this.pagination.pageindex,
        imagetextid: this.$route.params.id
      }
      comment(opt)
        .then(res => {
          if (res.allComment) {
            res.allComment = res.allComment.map(item=>{
              item.replytime = DateDiffFormat(item.replytime)
              item.commentreply = item.commentreply.map(reply=>{
                reply.replytime = DateDiffFormat(reply.replytime)
                return reply
              })
              return item
            })
            res.allComment.forEach(n => {
              this.commentData.push(n)
            })
            if (res.total < opt.size * opt.page) {
              this.css.hasData = false
              this.css.isLoading = false
              if(this.pagination.pageindex !== 1){
                this.css.isEnd = true
              }
            }
          }
        })
        .catch(e => {
          console.error(e)
          this.css.hasData = false
          this.css.isLoading = false
          if(this.pagination.pageindex !== 1){
            this.css.isEnd = true
          }
        })
    },
    save() {
      let opt = {
        replycomment: this.reviewText,
        imagetextid: this.$route.params.id,
        isanonymity: Number(this.anonymous)
      }
      saveComment(opt)
        .then(res => {
          if (res) {
            this.showWriteReview = false
            this.reviewText = ''
            this.toast('发表成功')
            this.dataLoad()
          }
        })
    },
    commentLike(item) {
      if (!JSON.parse(window.localStorage.getItem('currentUser') || '{}').token) {
        this.$router.push(`/login`)
        return
      }
      if (item.islike) {
        let opt = {
          commentid: item.id,
          islike: 0
        }
        commentLike(opt)
          .then(res => {
            if (res) {
              item.islike = 0
              item.likecount--
            }
          })
      } else {
        let opt = {
          commentid: item.id,
          islike: 1
        }
        commentLike(opt)
          .then(res => {
            if (res) {
              item.islike = 1
              item.likecount++
            }
          })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.comment {
  padding: 5vw 0 65px;
}
.comment-item {
  margin-bottom: 5.33vw;
}
.comment-info {
  display: flex;
  width: 100%;
  padding-left: 4vw;
  padding-right: 5.33vw;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.comment-headImg {
  width: 7.47vw;
  height: 7.47vw;
  border-radius: 50%;
}
.comment-name {
  font-size: 16px;
  position: absolute;
  left: 14.13vw;
}
.comment-like {
  font-size: 10px;
  color: rgb(153, 153, 153);
  &::after {
    content: "";
    background: url(/static/img/d_like.png);
    float: right;
    width: 12px;
    height: 13px;
    background-size: 12px 13px;
    margin-left: 4px;
  }
  &.like::after{
    content: '';
    background: url(/static/img/d_dlike2.png);
    background-size: 12px 13px;
  }
}
.comment-body {
  width: 100%;
  padding: 0 4vw 0 14.13vw;
  margin-top: 15px;
}
.comment-time {
  margin-top: 12px;
  font-size: 10px;
  color: rgb(51, 51, 51);
}
.comment-text {
  width: 100%;
  padding-right: 4vw;
  font-size: 14px;
}
.comment-reply {
  width: 100%;
  background-color: rgb(248, 248, 248);
  padding-top: 2.13vw;
  margin-top: 5.33vw;
  overflow: hidden;
}
.comment-reply-headImg {
  width: 5.87vw;
  height: 5.87vw;
  border-radius: 50%;
}
.comment-reply-name {
  font-size: 16px;
  position: absolute;
  left: 12.4vw;
  color: rgb(204, 204, 204);
}
.comment-reply-text {
  width: 100%;
  padding-left: 4vw;
  padding-right: 8.8vw;
  margin-bottom: 4vw;
  margin-top: 4vw;
  font-size: 14px;
}
.comment-reply-time {
  padding-left: 4vw;
  font-size: 10px;
  color: rgb(51, 51, 51);
  margin-bottom: 4vw;
}
.writeReview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.33);
  z-index: 9;
}
.reviewContent {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 4vw 4.8vw;
  background-color: rgb(242, 242, 242);
  label{
    font-size: 12px;
  }
}
.reviewInput {
  width: 100%;
  height: 20vw;
  border: none;
  padding: 3vw;
  font-size: 14px;
}
.submitReview {
  width: 17.33vw;
  height: 6.4vw;
  background-color: rgb(153, 153, 153);
  text-align: center;
  line-height: 6.4vw;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  float: right;
  margin-top: 2px;
  &.black{
    background: #333;
  }
}
.write {
  height: 44px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(204, 204, 204, 1);
  color: #fff;
  display: flex;
  line-height: 44px;
  font-size: 14px;
  padding-left: 15px;
  &::before {
    content: "";
    width: 1px;
    height: 24px;
    background: #fff;
    margin: 10px 15px 0 0;
  }
}
#anonymous{
  display: none;
  
}
.anonymous{
  position: relative;
  margin-left: 20px;
  color: #666;
  &::before{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid #666;
    position: absolute;
    left: -20px;
    top: 0;
    padding: 4px;
    border-radius: 50%;
  }
}

#anonymous:checked+.anonymous::before{
  background-color: #ffce00;
  border-color: rgba($color: #ffce00, $alpha: 0.5);
}
</style>
